<script setup lang="ts" name="loveTalk">

  import {reactive} from "vue";
  import {nanoid} from "nanoid";
  import { useTalkStore } from '@/store/talk'
  import axios from "axios";

let talkStore = useTalkStore()


  function getTalkListInfo () {
    //发请求
    axios.get('https://api.uomg.com/api/rand.qinghua?format=json').then(res => {
      //这个写法是连续解构赋值加重命名
      let {data:{content:title}} = res
      console.log(res.data)
      //把字符串包装成对象
      let obj = {id: nanoid(),title }
      talkStore.talkList.unshift(obj)
    })
  }
</script>

<template>
  <div class="talk">
    <button @click="getTalkListInfo">获取一句</button>
    <ul>
      <li v-for="(item, index) in talkStore.talkList" :key="index">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<style scoped>
.talk {
  background-color: #ba7c4a;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
</style>